<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("ul>li").mouseenter(function () {
                $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
            }).mouseleave(function () {
                $("ul>li").css("backgroundColor","");
            }).click(function () {
                $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
            })
        })
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>3</li>
    <li>5</li>
    <li>7</li>
    <li>9</li>
    <li>11</li>
</ul>
</body>
</html>